<template>
  <div class="header-box" :class="showType == 'sdk' ? 'sdk-bg' : ''">
    <div class="nav-left item">   
      <div class="nav-left-inner">
        <img :src="showType == 'sdk' ? cibnSdkLogo: cibnTmsLogo" class="nav-logo" :class="showType == 'sdk' ? 'sdk-width' : ''">
        <img :src="switchIcons" class="switch-icon" @click="selectValue(showType)" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
      </div>
    </div>
    <div class="nav-tab item">
      <div class="tab-item" v-for="(item, index) in list" 
                            :key="index" 
                            @click="tabClick(item)"
                            :class="tabId == item.value ? 'active-color': ''">{{item.name}}</div>
    </div>
    <div class="nav-right item">
      <span class="data">{{ timeInt }}</span>
      <span class="time">{{ time }}</span>
    </div>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router';
  import { onBeforeMount,onUnmounted, ref, defineEmits, defineProps, watch } from "vue";
  import { formatYMDhms, getWeekDate } from '@/utils/func/util'
  import cibnTmsLogo from'/src/assets/CIBN_TMS_LOGO.png'
  import switchIcon from '/src/assets/switch-icon.png'
  import switchIconActive from '/src/assets/switch-icon-active.png'
  import cibnSdkLogo from'/src/assets/CIBN_SDK_LOGO.png'
  /* eslint-disable */
// eslint-disable-next-line vue/no-setup-props-destructure
  const props = defineProps({
    tabId: {
        type: Number,
        required: false,
        default: 0,
    },
    showType:{
      type: String,
      default: 'sdk'
    },
    list:{
      type: Array,
      default: []
    }
  })
  const switchIcons = ref(switchIcon);
  const handleMouseOver = () => {
    switchIcons.value = switchIconActive;
    };
    const handleMouseLeave = () => {
      switchIcons.value = switchIcon;
    };
 
  const tab = ref(0);
  // 监听 data 变化，更新图表
  watch(() => props.showType, () => {
    console.log('props.showType',props.showType)
  }, { deep: true });
  const router = useRouter();
  const selectValue = (val) => {
    if(val == 'sdk'){
      router.push('/tms')
    }else {
      router.push('/sdk')
    }
  };
  const intervalAllId = ref(null);
  const timeInt = ref('');
  const time = ref('');
  const emit = defineEmits(['updateClickItems'])

    if (intervalAllId.value) clearInterval(intervalAllId.value);
    intervalAllId.value = setInterval(() => {
      timeInt.value = formatYMDhms(new Date().getTime())
      time.value = getWeekDate()
      }, (60 * 5) * 1000 * 60)
  onBeforeMount(() => {
    timeInt.value = formatYMDhms(new Date().getTime())
    time.value = getWeekDate()
  });
  onUnmounted(() => {
    // 清除定时器
    if (intervalAllId.value) clearInterval(intervalAllId.value);
  });   
  const tabClick = (item) => {
    tab.value = item.value;
    emit('updateClickItems', tab.value);
  };

</script>
<style scoped lang="scss">
  .active-color {
    color: #fff;
    opacity: 1 !important;
    background: url('/src/assets/top-btn-bg.png') no-repeat 0 0;
    background-size: contain;
  }
  .header-box{
    min-width: 1370px;
    height: 63px;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    background: url('/src/assets/head-nav-new.png') 0 0 no-repeat;
    background-size: 100% 100%;
    width: 100%;
    display: flex;
    align-items: center;
    color: #fff;
    .nav-left{
      width: 32%;
      height: 65px;
      padding-left: 40px;
      display: flex;
      align-items: center;
      &-inner{
        display: flex;
        align-items: center;
        .nav-logo{
          width: 240px;
          height: 32px;
        }
        .switch-icon{
          width: 20px;
          height: 20px;
          margin-left: 10px;
          cursor: pointer;
        }
      }
    }
    .item{
      // flex: 1;
      &.nav-tab{
        width: 40%;
        display: flex;
        height: 62px;
        .tab-item{
          width: 120px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          opacity: 0.7;
          cursor: pointer;
          font-weight: bold;
           margin-bottom: 5px;
        }
      }
      &.nav-right{
        width: 28%;
        font-size: 14px;
        text-align: right;
        padding-right: 40px;
        color: #fff;
        opacity: 0.7;
        .time{
          padding-left: 15px;
        }
      }
    }
  }
  .pull-down-box{
    width: 125px;
    font-size: 19px;
  }
  .sdk-width{
    width: 318px !important;
  }
  .sdk-bg{
    background: url('/src/assets/head-nav-new-sdk.png') 0 0 no-repeat !important;
    background-size: 100% 100% !important;
  }
</style>
